<template>
  <div class="main_box">
    <div class="detail_wrap" style="padding:10px;">
      <div class="tit" style="margin-left: 35px; padding-left: 45px;">
        <h2>任 务 详 细 信 息</h2>
        <el-button
          type="success"
          size="small"
          plain
          icon="fa fa-mail-forward"
          @click="returnList"
        >
          返 回</el-button
        >
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">任务名称:</label>
            <span>{{ dataInfo.taskName }}</span>
          </li>
          <li>
            <label class="label">任务内容:</label>
            <span>{{ dataInfo.taskContent }}</span>
          </li>
          <li>
            <label class="label">任务地点:</label>
            <span>{{ dataInfo.taskLocation }}</span>
          </li>
          <li>
            <label class="label">所需人数:</label>
            <span>{{ dataInfo.peopleNumber }}</span>
          </li>
          <li>
            <label class="label">任务开始时间:</label>
            <span>{{ dataInfo.taskStartDate }}</span>
          </li>
          <li>
            <label class="label">任务结束时间:</label>
            <span>{{ dataInfo.taskEndDate }}</span>
          </li>
          <li>
            <label class="label">薪酬:</label>
            <span>{{ dataInfo.emolument }}</span>
          </li>
          <li>
            <label class="label">任务紧急程度:</label>
            <span v-if="dataInfo.busyLevel == 1">正常</span>
            <span v-if="dataInfo.busyLevel == 2">紧急</span>
          </li>
          <li>
            <label class="label">任务种类:</label>

            <span v-if="dataInfo.taskType == 1">单采</span>
            <span v-if="dataInfo.taskType == 2">混采</span>
          </li>
          <li>
            <label class="label">任务类型:</label>
            <span v-if="dataInfo.taskKind == 1">人员</span>
            <span v-if="dataInfo.taskKind == 2">环境</span>
          </li>
          <li>
            <label class="label">任务状态:</label>
            <span v-if="dataInfo.taskState == 1">待开启</span>
            <span v-if="dataInfo.taskState == 2">报名中</span>
            <span v-if="dataInfo.taskState == 3">已结束</span>
          </li>
          <li>
            <label class="label">联系人手机号:</label>
            <span>{{ dataInfo.linkPhone }}</span>
          </li>
          <li>
            <label class="label">联系人名称:</label>
            <span>{{ dataInfo.linkName }}</span>
          </li>
          <li>
            <label class="label">报名开始时间:</label>
            <span v-if="dataInfo.signStartDate == null">暂无</span>
            <span v-else>{{ dataInfo.signStartDate }}</span>
          </li>
          <li>
            <label class="label">报名结束时间:</label>
            <span v-if="dataInfo.signEndDate == null">暂无</span>
            <span v-else>{{ dataInfo.signEndDate }}</span>
          </li>
        </ul>
      </div>

      <div
        class="tit"
        style="margin-left: 35px; padding-left: 45px;margin-bottom:20px"
      >
        <h2>领 取 此 任 务 的 护 士 列 表</h2>
      </div>
      <el-row ref="tableRow" style="width:1080px">
        <!-- 列表 -->
        <el-table :data="dataList" :fit="true">
          <el-table-column
            prop="nurseName"
            label="护士名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idCard"
            label="身份证"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="nurseLevel"
            label="护士等级"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="certificateFlag"
            label="是否有护士证"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="grade"
            label="评分"
            align="center"
          ></el-table-column>

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-has="permissionDelete"
                @click.native="revocationTask(scope.row.nurseId)"
                size="mini"
                >撤销任务</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, jumper, next, pager, prev"
          :total="page.pageTotal"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import taskApi from "@/api/sample/task";
import * as message from "@/constants/message";
export default {
  data() {
    return {
      dataInfo: [],
      dataList: [],

      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20
      },
      permissionDelete: "SYSTEM_MANAGER_SAMPLE_NURSE_TASK_DELETE" // 删除
    };
  },
  methods: {
    getData() {
      let _this = this;
      let cond = {
        id: _this.$route.query.id,
        pageNo: _this.page.pageNo,
        pageSize: _this.page.pageSize
      };
      taskApi.getTask(cond).then(res => {
        _this.dataInfo = res.data;
        _this.page.pageTotal = res.data.total;
        _this.dataList = res.data.nurseInfos;
        console.log(res.data);
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push("/sample/sampleNurseTask");
    },
    //撤销
    revocationTask(id) {
      let taskId = this.dataInfo.taskId;
      let cond = {
        taskId: taskId,
        nurseId: id
      };
      this.$confirm("确认撤销该护士？", message.TITLE_PROMPT).then(() => {
        taskApi.revocationTask(cond).then(res => {
          this.$Utils.notifySuccess();
          this.getData();
        });
      });
    },
    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.getData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.getData();
    },
    getTableHeight() {
      this.$nextTick(function() {
        this.maxHeight =
          window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        window.onresize = () => {
          this.maxHeight =
            window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        };
      });
    }
  },
  mounted() {
    this.getData();
    this.getTableHeight();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope></style>
